<template>
    <div>
        <el-card shadow="never" style="height:400px;background:#000;overflow:auto;">
            <pre v-for="item in logList" :key="item.index" style="color:#fff;line-height:20px" v-if="logList">{{item}}</pre>
            <pre style="color:#fff;line-height:20px" v-else>暂无</pre>
            <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                <div class="loading" style="text-align: center;font-size: 30px;color: #fff;" v-show="isShow">
                    <i class="el-icon-loading"></i>
                </div>
            </div>
        </el-card>
    </div>
</template>



<script>
import {getDataByUrl} from "@/service/components/common.js";
export default{
    props:[
      "id",
      "url",
    ],
    data(){
        return{
           pageNum:0,
           pageSize:100,
           busy : false,
           isShow:true,
           logList:[]
        }
    },
    mounted() {
        console.log(this.id,this.url)
    },
    watch:{
       logList(val){
          if(val[0] == null){
            this.logList = ['无']
          }
       }
    },
    methods:{
        loadMore () {
            this.busy = true
            //把busy置位true，这次请求结束前不再执行
            setTimeout(() => {
                this.pageNum++
                this.getLogData(true)
                //调用获取数据接口，并且传入一个true，让axios方法指导是否需要拼接数组。
            }, 500)
        },
        getLogData (flag) {
            var param = {
                id:this.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
               
            }
            getDataByUrl(this.url,param).then((ret) => {
                if (flag&&ret.code ==0) {
                this.logList = this.logList.concat(ret.data.data)
                //如果是flag=true，则拼接数组。
                    if (ret.data.data) {
                        this.busy = false
                        this.isShow = false
                    } else {
                        this.isShow = false
                        this.busy = true
                    }
                } else {
                    this.logList = ret.data.data
                    this.busy = false
                }
            })
        },
    }
}
</script>
